<template>
  <div style="height: 100%;">
    <div class="target-wrapper" v-infinite-scroll="loadData" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <div v-for="item in goalList" :key="item.id">
        <div class="target-content" v-if="(item.krList && item.krList.length > 0 && !showActions) || showActions">
          <span class="arrow-status" :class="getArrowType(item)"></span>
          <span class="goal-status">{{getWord(item)}}</span>
          <div class="target-item" @click="clickGoal(item.id)">
            <div class="target-top">
              <el-progress type="circle" :percentage="item.goalProgressPercent * 1 || 0" :width="50"></el-progress>
              <div class="target-info">
                <div class="target-main">
                  <div class="title">{{item.goalName}}</div>
                  <div>
                    <span class="level">{{goalTag[item.goalTag-1]}}</span>
                    <span class="user" v-if="item.goalExecuteDepartmentName">{{item.goalExecuteDepartmentName}} {{item.goalPrincipalName}}</span>
                  </div>
                </div>
              </div>
              <div class="target-action" v-if="showActions">
                <span>|</span>
                <i class="el-icon-more-outline" @click.stop="editTarget(item.id)"></i>
              </div>
            </div>
            <div v-for="kr in item.krList" :key="kr.id" class="target-bottom-wrapper">
              <div class="target-bottom" v-if="kr.krDataType === '1'" @click.stop="clickKr(kr, item)">
                <div><span style="color: #409EFF; font-weight: bold; margin-right: 10px;">KR</span>{{kr.krName}}<span style="color: #79828C">（关键结果进度：{{kr.krProgressPercent}}%）</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      goalTag: ['公司级','部门级','团队级'],
      searchPost:{
        goalExecuteDepartmentId: '',
        goalPeriodYear: '',
        goalPeriodTime: '',
        filterGoalId: '',
        searchType: 0,
        krDataType: '',
        goalTag: '',
        page: 1,
        limit: 999,
      },
      isFirstLoading: false,
      loading: false,
      totalPage: 0,
      goalList: [],
      goalListInit: '',
    };
  },
  components: {},
  props: ["showActions", "curGoalId", 'postSearchTime'],
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.searchPost.page >= this.totalPage;
    },
  },
  watch: {
    postSearchTime: {
      handler() {
        this.searchPost.goalExecuteDepartmentId = ''
        this.searchPost.goalTag = ''
        this.getGoalList(true)
      },
      deep: true
    }
  },
  methods: {
    async loadData() {
      this.loading = true;
      this.searchPost.page ++;
      await this.getGoalList();
    },
    async getGoalList(init) {
      if(init) {
        this.searchPost.page = 1;
        this.searchPost.goalPeriodYear = this.postSearchTime[0];
        this.searchPost.goalPeriodTime = !this.showActions && this.postSearchTime[1] === '0200' ? '' : this.postSearchTime[1];
        this.searchPost.filterGoalId = this.curGoalId ? this.curGoalId: '';
        this.searchPost.searchType = this.curGoalId ? 1 : 0;
        this.searchPost.krDataType = this.showActions ? '' : '1';
        this.goalList = [];
        this.isFirstLoading = true;
      }
      let {list, totalCount, totalPage} = await this.$httpN.postB('lkr/goal/goalList', this.searchPost)
      if (!this.showActions) {
        list.map(function(a){
          a.krList = a.krList.filter(b=>{return b.krDataType==='1'})
          return a
        })
      }
      
      this.loading = false;
      this.goalList.push(...list);
      this.goalListInit = JSON.stringify(this.goalList)
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    searchExecuteDepartment(id) {
      if(!this.searchPost.goalExecuteDepartmentId && !id) return
      this.searchPost.goalExecuteDepartmentId = id
      this.getGoalList(true)
    },
    searchGoalTag(goalTag) {
      this.searchPost.goalTag = goalTag
      this.getGoalList(true)
    },
    searchGoalOrKrName(filterName) {
      let list = JSON.parse(this.goalListInit).filter(item => {
        let temp = 0
        item.krList.forEach(kr => {
          if( this.similar(filterName, kr.krName ) > 0) temp = Math.max(temp, this.similar(filterName, kr.krName))
        })
        item.similar = Math.max(temp, this.similar(filterName, item.goalName))
        return this.similar(filterName, item.goalName) > 0 || temp
      })
      this.goalList = filterName ? list.sort(this.objSort("similar")) : JSON.parse(this.goalListInit)
    },
    similar(a, b) {
      if (!a || !b) { return 0; }
      if(a.length > b.length) {var t=b;b=a;a=t;} // 保证 a <= b
      var al=a.length, bl=b.length;
      var mp = []; // 一个表
      var i, j, ai, lt, tmp; // ai：字符串a的第i个字符。 lt：左上角的值。 tmp：暂存新的值。
      for (i = 0; i <= bl; i++) { mp[i] = i;}
      for (i = 1; i <= al; i++) {
        ai = a.charAt(i - 1);
        lt = mp[0];
        mp[0] = mp[0]+1;
        for (j = 1; j <= bl; j++) {
          tmp = Math.min(mp[j]+1, mp[j-1]+1, lt + (ai==b.charAt(j-1)?0:1));
          lt = mp[j];
          mp[j] = tmp;
        }
      }
      return (1 - (mp[bl]/bl));
    },
    objSort(prop){
      return function (obj1, obj2) {
        var val1 = obj1[prop];
        var val2 = obj2[prop];
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
          val1 = Number(val1);
          val2 = Number(val2);
        }
        if (val1 < val2) {
          return 1;
        } else if (val1 > val2) {
          return -1;
        } else {
          return 0;
        }           
      }
    },
    clickGoal(goalId) {
      this.$emit("chooseGoal", goalId)
    },
    clickKr(kr, goal) {
      this.$emit("chooseKr", kr, goal)
    },
    editTarget(id) {
      this.$emit("editTarget", id)
    },
    getArrowType(item) {
      if(item.goalStatus === '1') {
        return 'arrow-1'
      }else if(item.goalStatus === '2') {
        return 'arrow-2'
      }else if(item.goalStatus === '3') {
        return 'arrow-3'
      }
    },
    getWord(item) {
      if(item.goalStatus === '1') {
        return '拟定状态'
      }else if(item.goalStatus === '2') {
        return '执行状态'
      }else if(item.goalStatus === '3') {
        return '完成状态'
      }
    },
  }
}
</script>

<style lang='scss' scoped>
.target-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  scrollbar-arrow-color:red;
}
.target-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px #DEDEDE;
  background: rgba(0,0,0,0.2);
  scrollbar-arrow-color:red;
}
.target-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #F5F5F5;
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}
.target-wrapper {
  overflow-y: auto;
  height: 100%;
  padding-right: 5px;
  .target-content {
    margin-right: 5px;
    position: relative;
    background-color: #FFF;
    border: 1px solid #EDEDEE;
    margin-bottom: 20px;
    .arrow-status{
      width:0;
      height:0;
      position: absolute;
      top: 0;
      left: 0;
      border-top:solid 30px #21D779;
      border-left:solid 30px #21D779 ;
      border-bottom:solid 30px transparent;
      border-right:solid 30px transparent;      
      &.arrow-1{
        border-top:solid 30px #4495FF;
        border-left:solid 30px #4495FF ;
      }
      &.arrow-2{
        border-top:solid 30px #21D779;
        border-left:solid 30px #21D779 ;
      }
      &.arrow-3{
        border-top:solid 30px #DBDADA;
        border-left:solid 30px #DBDADA ;
      }
    }
    .goal-status{
      position: absolute;
      width: 60px;
      line-height: 20px;
      left: -6px;
      top: 11px;
      color: white;
      font-size: 12px;
      transform: rotate(-45deg);
      text-align: center;
      font-weight: normal;
    }
    &::after{
      content: '';
      width:0;
      height:0;
      position: absolute;
      top: 0;
      left: 0;
      border-top:solid 15px white;
      border-left:solid 15px white ;
      border-bottom:solid 15px transparent;
      border-right:solid 15px transparent;
    }
    .target-item {
      cursor: pointer;
      .target-top {
        padding: 30px 50px;
        border-bottom: 1px solid #EDEDEE;
        display: flex;
        .target-info {
          flex: 1;
          margin: 0 30px;
          display: flex;
          .target-main {
            flex: 1;
            .title {
              font-size: 16px;
              margin-bottom: 10px;
            }
            .level {
              background-color: #CCE7FF;
              color: #3296FA;
              padding: 4px 8px;
              border-radius: 20px;
            }
            .user {
              margin-left: 10px;
              display: inline-block;
              padding: 4px 8px;
              border: 1px solid #ECECEC;
              border-radius: 20px;
            }
          }
          .number {
            width: 30px;
            height: 50px;
            line-height: 50px;
            text-align: center;
          }
        }
        .target-action {
          width: 60px;
          height: 50px;
          line-height: 50px;
          font-size: 20px;
          color: #79828C;
          span {
            color: #EDEDEE;
            margin-right: 10px;
          }
          i {
            cursor: pointer;
          }
        }
      }
      .target-bottom-wrapper {
        &:last-child .target-bottom{
          border-bottom: none;
        }
        .target-bottom {
          padding: 20px 20px 20px 0;
          margin-left: 130px;
          width: calc(100% - 130px);
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #EDEDEE;
          .number {
            margin-right: 110px;
            width: 30px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>